<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>榜单</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="../css/mui.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="../css/timecheck.css" />
  <link rel="stylesheet" href="../fonts/iconfont.css" />
  <script>
    var width =window.localStorage.getItem('width');
    document.documentElement.style.fontSize =  width ? width/6.4+  'px' :'55px';
  </script>
  <style>
    html,
    body,
    #app {
      width: 100%;
      /*height: 100%;*/
    }
    #app{
      padding-bottom: 0.35rem;
    }


    table {
      font-size: 0.22rem;
      width: 100%;
      text-align: center;
      margin-top: 0.1rem;
    }
    table tr td{
      padding: 0.1rem 0;
      height: 0.8rem;
      font-size: 0.2rem;
    }
    table,
    table,
    tbody,td div{
      text-align: center;
    }
    td span{
      display: inline-block;
      text-align: left;
      vertical-align: middle;
    }
    /*.bglight {*/
      /*background-color: #FFFFFF;*/
    /*}*/
    /*.tab-head {*/
      /*background-color: #FFFFFF;*/
      /*line-height: 0.5rem;*/
    /*}*/

    /*.light {*/
      /*color: #8e8a8a;*/
    /*}*/
    /*.formDiv{*/
      /*width: 100%;*/
      /*background-color: white;*/
      /*padding: 0.2rem 0.1rem 0.1rem;*/
      /*margin: 0.2rem 0 0 ;*/
      /*color:black;*/
      /*display: flex;*/
      /*justify-content:space-between;*/
    /*}*/
    /*.form{*/
      /*width: 49%;*/
      /*background-color: #F7F7F7;*/
      /*border-radius: 0.2rem;*/
      /*text-align: center;*/
      /*padding: 0.3rem 0 ;*/
    /*}*/
    /*.float{*/
      /*width: 48%;*/
      /*float: left;*/
    /*}*/
    .form .float p{
      margin: 0 0 0.05rem;
      color:black;
      font-size: 0.22rem;
    }
    .borderRight1{
      border-right:1px solid #CCCCCC ;
    }
    .formTitle{
      font-size: 0.26rem;
      margin: 0 0 0.1rem;
    }
    .totalForm{
      width: 100%;
      text-align: center;
      font-size: 0.22rem;
    }
    .totalForm>p{
      width: 100%;
      color:black;
    }
    .totalForm>p:first-child{
      font-size: 0.26rem;
    }
    .totalForm p{
      margin: 0;
    }
    .totalForm .formFlex{
      display: flex;
      margin-top: 0.1rem;
    }
    .formFlex .flexItem{
      width: 33%;
    }
    .colorBlack{
      color:black
    }
    .mui-icon-arrowthindown::before{
      height: 0.2rem;
    }
    .scanForm{
      width: 100%;
      display: flex;
      justify-content:space-around
    }
    .scanDiv{
      width: 100%;
      text-align: center;
      background-color: #F7F7F7;
      border-radius: 0.2rem;
      padding-top: 0.2rem;
    }
    .fixed{
      position: fixed;
      top:0.67rem;
      width: 100%;
      font-size: 0.2rem;
      background-color: white;
      z-index: 999;
    }
    .fixed span{
      display: inline-block;
      text-align: center;
      height: 0.8rem;
      line-height: 0.8rem;
    }
    .display{
      display: none;
    }
    .choose{
      width: 1rem;
      margin: 0;
      text-align: center;
      padding: 0.02rem ;
      font-size: 0.18rem;
      background-color: white;
      border: 1px solid #ED7D31;
    }
    .chooseList{
      text-align: center;
      background-color: white;
      border-left: 1px solid #ED7D31;
      border-right: 1px solid #ED7D31;

    }
    .chooseList p{
      width:100%;
      margin: 0;
      padding: 0.02rem;
      border-bottom: 1px solid #ED7D31;
      font-size: 0.18rem;
      color:black;
    }
    .chooseList  .default{
      color:white;
      background-color: #ED7D31 ;
    }
    .jiantou{
      position: absolute;
      top:0.1rem;
      right: 0.3rem;
      width: 0.3rem;
    }
    .jiantou  img{
      width: 0.3rem;
    }
    .chooseDiv{
      color:#FF6800;
      padding: 0.2rem 0.1rem;
      margin-top: 0.05rem;
      background-color: white;
      position: relative;
      font-size: 0.24rem;
    }
    .chooseDiv img{
      width: 0.2rem;
      position: absolute;
    }
    .chooseDiv img:first-child{
      top:0.23rem;
      left: 0.2rem;
    }
    .chooseDiv img:last-child{
      top:0.23rem;
      right: 0.3rem;
    }
    .chooseDiv span{
      display: inline-block;
      height: 100%;
      line-height: 100%;
      clear: both;
      position: relative;
      left: 0.4rem;
    }
    .storeChoose{
      width: 50%;
      margin: 0.2rem auto 0;
      border: 1px solid #ccc;
      font-size: 0.2rem;
      text-align: center;
      background-color: white;
      overflow: hidden;

    }
    .storeChoose span{
      display: inline-block;
      width: 50%;
      padding: 0.05rem 0;
      float: left;
    }
    .storeChoose .default{
      background-color: #ccc ;
    }
    .deviceBox{
      width: 100%;
      padding: 0 0.2rem ;
      margin-top: 0.3rem;
      font-size: 0.24rem;
      overflow: hidden;
    }
    .deviceBox div{
      float: left;
    }
    .chooseDeviceList{
      width: 80%;
      border-bottom:1px solid #ccc ;
      overflow: hidden;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      white-space:nowrap;
      height:24px;
      display:block;
    }
    .deviceChoose{
      width: 18%;
      margin-left: 2%;
      background-color: white;
      border: 1px solid #ff6800;
      text-align: center;
    }
    .rankingTable{
      width: 100%;
      margin-top: 0.2rem;
    }
    .rankingTable tr {
      height: 0.2rem;
    }
    .giftTd{
      position: relative;
    }
    .giftTd .normalImg{
      width:  0.5rem;
      position: absolute;
      left: -0.1rem;
      top:0.15rem;
    }
    .giftTd .showImg{
      width: 3.6rem;
      position: absolute;
      left: 0.5rem;
      top: -0.5rem;
      z-index: 100;
    }
    .giftTd span{
      width: 1.8rem;/**/
      display: inline-block;
      margin-left: 0.4rem;
      /*padding: 0.1rem 0;*/
      /*position: absolute;*/
      /*right: -0.2rem;*/
      /*top:0;*/

    }
    .bgWhite{
      background-color: white;
    }
    .deviceList{
      width: 100%;
      height: 100%;
      position: fixed;
      top:0;
      background-color: #efeff4;
      z-index: 9999;
      font-size: 0.24rem;
    }
    .deviceList img{
      width: 0.3rem;
    }
    .deviceList table{
      margin: 0;
    }
    .deviceList tr td:nth-child(1){
      padding: 0.13rem 0.2rem 0  0;
      width: 10%;
      text-align: right;
    }
    .deviceList tr td:nth-child(2){
      width: 30%;
      text-align: left;
    }
    .deviceList tr td:nth-child(3){
      width: 30%;
      text-align: left;
      color: rgba(0, 0, 0, 0.51);
    }
    .deviceList tr td:nth-child(4){
      width: 20%;
      text-align: right;
      padding-right: 0.3rem;
      color: rgba(0, 0, 0, 0.51);
    }

/*修改选择框样式*/
    input[type="checkbox"]{
      width:0.32rem;
      height:0.3rem;
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      line-height: 18px;
      position: relative;
    }
    input[type="checkbox"]::before{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      background: #fff;
      width: 100%;
      height: 100%;
      border: 1px solid #d9d9d9
    }
    input[type="checkbox"]:checked::before{
      content: "\2713";
      position: absolute;top: 0;
      left: 0;
      width:100%;
      border: none;
      color:#fff;
      background-color: #5677FC;
      font-size: 0.18rem;
      font-weight: bold;
    }
    .query{
      width: 100%;
      position: absolute;
      bottom:0;
      background-color: white;
      padding: 0 10%;
      display: flex;
      justify-content:center ;
    }
    .queryBtn{
      width: 30%;
      height: 0.6rem;
      border-radius: 0.3rem;
      line-height: 0.6rem;
      text-align: center;
      color:white;
      background-color: #ff6800;
      margin: 0.2rem auto;

    }
    .query .queryBtn:nth-child(2){
      background-color: #ccc;
    }

    .tips{
      width: 100%;
      height: 0.4rem;
      line-height: 0.4rem;
      background-color: rgba(255, 104, 0, 0.32);
      color:red;
      padding-left: 0.2rem;
      margin-top: 3.25rem;
    }
    .colorGray{
      color: #9c9c9c;
    }
    .allBtn{
      width: 1rem;
      font-size: 0.22rem;
      border-radius: 0.2rem;
      border: 1px solid black;
      text-align: center;
      float: right;
      margin-right: 0.12rem;
      margin-top: 0.12rem;
      color:black;
    }

  </style>
</head>

<body>
<script src="../js/echarts.common.min.js" ></script>
<script src="../js/vue.min.js" ></script>
<script src="../config.js" ></script>
<script src="../common/timeCheck2.js" ></script>
<script src="../js/mui.min.js"></script>
<div id="app" class="mui-content" >
  <time-check :type="3" :names='names' :dateType="dateType"  :actnum="actnum" :fromdate="fromDate" :todate='toDate' :top="top"></time-check>
  <!--排行物品选择框-->
  <div>
    <div class="chooseDiv">
      <img src="../images/gift.png" alt="">
      <span >奖品受欢迎程度</span>
      <img src="../images/xiajiantou.png" alt="">
    </div>
  </div>
  <div class="storeChoose">
    <span @click="chooseStore(1)" :class="{default:type ===1 }">本店排名</span>
    <span @click="chooseStore(2)" :class="{default:type ===2 }">总部排名</span>
  </div>
  <!--设备选择-->
  <div class="deviceBox">
    <div class="chooseDeviceList" style="font-size: 0.2rem"> <span v-for="(item,index) in chooseDeviceList">{{item.deviceName}}，</span> </div>
    <div class="deviceChoose" @click="openModalFun" style="font-size: 0.22rem">筛 选</div>
  </div>

  <table class="rankingTable">
    <tr class="bgWhite">
      <td style="width: 10%;">排行</td>
      <td style="width: 25%">奖品</td>
      <td style="width: 10%" class="colorGray">台数</td>
      <td style="width: 10%" class="colorGray">返奖数</td>
      <td style="width: 10%" class="colorGray">收币量</td>
      <td style="width: 15%">收币速率</td>
    </tr>
    <!-- :class="{bglight:index%2===1}"-->
    <tr class="dataTr" v-for="(item,index) in rankingList" :class="{bgWhite:index%2===1}" >
      <td>{{index+1}}</td>
      <td class="giftTd" @click="imgShow(index)">
        <img :src="config.imgPath + item.goodsIcon" alt="" class="normalImg">
        <img :src="config.imgPath + item.goodsIcon" alt="" class="showImg" style="display: none" >
        <span >{{item.giftName}}</span>
      </td>
      <td class="colorGray">{{item.deviceNumber}}台</td>
      <td class="colorGray">{{item.awardNumber}}个</td>
      <td class="colorGray">{{item.collectCoinNumber}}</td>
      <td>{{item.collectCoinRate}}</td>
    </tr>

  </table>
  <p  v-show="rankingList.length === 0" style="width: 100%;margin-top: 0.2rem;text-align: center;height: 0.59rem">暂无数据</p>


  <!--筛选模态框-->
  <div class="deviceList" v-show="openModal">


    <div  style="overflow-x: auto; overflow-y: auto;width: 100%;height:100%;padding-bottom: 0.95rem">
      <div style="width: 100%;overflow: hidden; background-color: #e2e2e2;">
        <p class="allBtn" @click="chooseALL"> {{checkedAll === 1 ? '全选' : '取消全选'}} </p>
      </div>
      <table style="overflow:auto;width: 100%;">
        <tr  v-for="(item,index) in deviceList" :class="{bgWhite:index%2===1}" >
          <!--v-show="item.deviceType === 2"-->
          <td > <img src="../images/liping.png" alt=""></td>
          <td>{{item.deviceName}}</td>
          <td>{{item.deviceNumber}}台</td>
          <td><input class="checkbox1" name="checkbox1" :value='index' type="checkbox" v-model="item.isCheck" ></td>
        </tr>
      </table>
    </div>
    <div class="query">
      <div class="queryBtn" @click="getVals">
        查询排行
      </div>
      <div class="queryBtn" @click="back1">
        返回
      </div>
    </div>

  </div>
  <!---->
  <div class="bar">
    <p class="borderRight " @click="toPage2('incomeItem')">收入</p>
    <p class="borderRight " @click="toPage2('coinShopOperated')">收币</p>
    <p class="borderRight" @click="toPage2('rewordShopReport')">返奖</p>
    <p class="borderRight" @click="toPage2('lotteryStore')">出票</p>
    <p class="default" >榜单</p>
    <p @click="toPage2('activity')">活动</p>
  </div>
  <!---->
  <p class="tips" style="font-size: 0.22rem">收币速率：查询周期内，奖品每天收币量的单台平均值</p>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    computed:{
//      chooseType:function(){
//        var  vm=this;
//        console.log(vm.chooseDeviceList.length)
//        if(vm.chooseDeviceList.length >0){
//          return vm.chooseDeviceList
//        }else{
//          return []
//        }
//      }
    },
    data: function() {
      return {
        names: {
          leftName: '出币',
          rightName: '投币'
        },
        currentShopObj: {},
        top:'1rem',

        storeId:'',
        storeName:'',
        toDate:'',
        fromDate:'',
        actnum:'',
        lastPage:'',
        dateType:'',
        type:1,  //1 门店排行   2总部排行
        openModal:false,   //模态框显示
        deviceList: [ ],  //所以设备
        chooseDeviceList:[], //选择的设备列表
        chooseDeviceIndex:[],   //选中设备下表
        rankingList:[
          {
            "giftName":"25cm圣诞礼物熊 GZ",
            "deviceNumber":1,
            "awardNumber":27,
            "collectCoinNumber":1582,
            "days":0,
            "collectCoinRate":226,
            "goodsIcon":"/warehouse/upload/1530001044938.jpg"
          },
          {
            "giftName":"25cm圣诞礼物熊 GZ",
            "deviceNumber":1,
            "awardNumber":27,
            "collectCoinNumber":1582,
            "days":0,
            "collectCoinRate":226,
            "goodsIcon":"/warehouse/upload/1530001044938.jpg"
          },
        ],
        checkModel:[],
        checkedAll:2,    //1.全选  2 取消全选
      }
    },
    created:function() {
      mui.init();
      mui.plusReady(function(){
        vm.receiveParams()
      });

    },
    mounted: function() {
      window.addEventListener('scroll', this.handleScroll);
    },
    methods: {
//获取榜单fun
      getRankingList:function(){
        var vm=this;
        var deviceNo=[];
        vm.chooseDeviceList.forEach(function(item,index){
          deviceNo.push(item.deviceNo)
        });
        config.ajax({
          url:'/rankings/awardRankings',
          data:{
            startDate:(vm.fromDate).replace(/-/g,''),
            endDate:(vm.toDate).replace(/-/g,''),
            storeId: Number(vm.type)===1 ?  vm.storeId : 0,       //总部排名 不传storeId
            deviceNO:deviceNo,
            top:100
          },
          success:function(res){
//            console.log(JSON.stringify(res))
            vm.rankingList=[];
            if(res.result===1){
              vm.rankingList=res.awardRanking ? res.awardRanking :[];
            }else{
              mui.toast(res.errormsg)
            }
          },
          error:function(res){
            mui.toast(res.errormsg)
          }
        })
      },
// 获取设备列表
      getDeviceList:function(){
        var vm=this;
        config.ajax({
          url:'/rankings/deviceScreen',
          data:{
            startDate:(vm.fromDate).replace(/-/g,''),
            endDate:(vm.toDate).replace(/-/g,''),
            storeId: Number(vm.type)===1 ?  vm.storeId : 0,       //总部排名 不传storeId
          },
          success:function(res){
            vm.deviceList=[]
            if(res.result ===1){
              vm.deviceList= res.deviceScreen ? JSON.parse(JSON.stringify(res.deviceScreen)) : [];
            }else {
              mui.toast(res.errormsg)
            }
            vm.checkedFun()
          },
          error:function(res){
            mui.toast(res.errormsg)
          }
        })
      },
//获取上个页面的信息fun
      receiveParams: function() {
        var sf = plus.webview.currentWebview();
        this.currentShopObj = sf.currentShopObj;
        this.storeId = sf.storeId
        this.storeName = sf.storeName
        this.toDate = sf.toDate
        this.fromDate = sf.fromDate
        this.actnum  = sf.actnum
        this.dateType  = sf.dateType
        this.lastPage  = sf.lastPage ? sf.lastPage : false
        if(this.lastPage){
          this.closePage()
        };
        this.getDeviceList()
      },
// 滚动条监听fun
      handleScroll:function(){
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if(scrollTop > 1030 ){
          vm.isFixed=true;
          vm.top='1.48rem'
        }else {
          vm.isFixed=false;
          vm.top='1rem'
        };
      },
// 2级页面跳转
      toPage2:function(url){
        var vm = this;
        var storeName=vm.storeName;
        mui.openWindow({
          url: './'+url+'.html',
          id: url,
          styles: {
            titleNView: {
              titleText:  storeName ,
              titleColor: "#FFFFFF",
              titleSize: "17px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              buttons: [{
                fontWeight: 'normal',
                fontSize: '18px',
                float: 'right',
                fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                text: "\ue602",
                onclick: function() {
                  var allPage = plus.webview.all()
                  var nowPage = plus.webview.getWebviewById('index')
                  for(var i = 0; i < allPage.length; i++) {
                    if(allPage[i].getURL() !== nowPage.getURL()) {
                      plus.webview.close(allPage[i]);
                    }
                  }
                }
              }],
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          extras: {
            storeId: vm.storeId,
            storeName: vm.storeName,
            fromDate: vm.fromDate,
            toDate:vm.toDate,
            dateType:vm.dateType,
            actnum: vm.actnum,
            lastPage:'rankingList',
          },
          createNew:true,
        });
      },
// 关闭上一个页面 保证1级页面是上一个页面
      closePage:function(){
        var vm=this;
        var allPage = plus.webview.all()
        var nowPage = plus.webview.getWebviewById(vm.lastPage);
        for(var i = 0; i < allPage.length; i++) {
          if(allPage[i].getURL() === nowPage.getURL()) {
            plus.webview.hide(allPage[i]);
            plus.webview.close(allPage[i]);
          }
        }
      },
// 选择门店排名 还是 总部排名   1 门店  2. 总部
      chooseStore:function(params){
        if(this.type !==params){
          this.type=params;
          this.getDeviceList()
          this.getRankingList();
        }
      },
// 获取复选框的值fun
      getVals:function(){
        var vm=this;
        var indexList = this.getCheckBoxRes('checkbox1');
        if(indexList.length < 1){
          mui.toast('请选择');
          return;
        }else{
          vm.chooseDeviceList=[];
          vm.chooseDeviceIndex=indexList;
          indexList.forEach(function(item,index){
            vm.chooseDeviceList.push(vm.deviceList[item])
          });
          vm.openModal=false;
          vm.getRankingList();
        }
      },
      getCheckBoxRes:function(className){
        var rdsObj   = document.getElementsByClassName(className);
        var checkVal =[];
        var k= 0;
        for(var i = 0; i < rdsObj.length; i++){
          if(rdsObj[i].checked){
            checkVal[k] = rdsObj[i].value;
            k++;
          }
        }
        return checkVal;
      },
// 筛选fun  打开模态框
      openModalFun:function(){
        var vm=this
        var sf = plus.webview.currentWebview();
            sf.setStyle({
              titleNView: {
                titleText: vm.storeName,
                autoBackButton: false,
              }
            })
        this.openModal=true;

        vm.checkedFun();
      },

//勾选选中的值fun
      checkedFun:function(){
        var vm=this;
        vm.deviceList.forEach(function(item,index){
          item.isCheck=false;
        });
        if(vm.chooseDeviceIndex.length>0){
          vm.chooseDeviceList=[];
          vm.chooseDeviceIndex.forEach(function(item,index){
            vm.deviceList[item].isCheck=true;
            vm.chooseDeviceList.push(vm.deviceList[item])
          })
        }else if(vm.chooseDeviceIndex.length===0){
          vm.deviceList.forEach(function(item,index){
            item.isCheck=true;
          });
          vm.chooseDeviceList=JSON.parse(JSON.stringify(vm.deviceList))
        }

      },
      back1:function(){
        var vm=this;
        vm.openModal=false;
        var sf = plus.webview.currentWebview();
        sf.setStyle({
          titleNView: {
            titleText: vm.storeName,
            titleColor: "#FFFFFF",
            titleSize: "17px",
            backgroundColor: "#FF6800",
            autoBackButton: true,
            buttons:[{
              fontWeight: 'normal',
              fontSize: '16px',
              float: 'right',
              fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
              text: "\ue602",
              zIndex:'999999',
              onclick:"javascript:var allPage = plus.webview.all()\n" +
              "var nowPage = plus.webview.getWebviewById('index')\n" +
              "for(var i = 0; i < allPage.length; i++) {\n" +
              "if(allPage[i].getURL() !== nowPage.getURL()) {\n" +
              "plus.webview.close(allPage[i]);\n} "
            }],
            splitLine: {
              color: "#CCCCCC",
              height: "1px"
            }
          }
        })
      },
      chooseALL:function(){
        var vm =this;
        if(vm.checkedAll ===1){
          vm.deviceList.forEach(function(item,index){
            item.isCheck =true
          })
          vm.checkedAll =2
        }else{
          vm.deviceList.forEach(function(item,index){
            item.isCheck =false
          })
          vm.checkedAll =1
        }
      },
      imgShow:function (index) {
        var imgs=document.getElementsByClassName('showImg');
        for (var i=0;i<imgs.length;i++) {
         if(i!==index){
           imgs[i].style.display='none';
         }
        }
        var bigImg=document.getElementsByClassName('showImg')[index];
        // console.log(bigImg.style.display);
        bigImg.style.display=bigImg.style.display==="none"? 'block':'none';
      }


    },
    watch: {
      fromDate: function() {
        this.getRankingList();
        this.getDeviceList()
      },
    }
  })
</script>
</body>

</html>